<template>
  <view class="root">
    <u-tabs class="tabs-style" bg-color="#fff" :list="list" lineColor="#2488F5" lineWidth="36rpx" :current="activeIndex"
      :activeStyle="{ color: '#2488F5' }" @click="tabsClick"></u-tabs>
    <view class="bottom-wrapper">
      <template v-if="activeIndex == 0">
        <view class="top">
          <uni-easyinput prefixIcon="search" v-model="searchValueVehicleRecord" placeholder="请输入车牌号或送修人身份证号"
            @input="inputVehicle" class="search-input"></uni-easyinput>
        </view>
        <view class="content">
          <yy-scroll-view ref="scrllViewRef1" :static-params="staticParams1"
            request-url="/machine/maintenanceRecordsList" :auto-request="false">
            <template slot-scope="{list}">
              <view class="list-item-wrapper" v-for="(item, index) in list" :key="index" @click="handleDetail(item)">
                <view class="list-item-title">
                  {{item.carNumber ? item.carNumber : '无车牌'}}
                </view>
                <view class="list-item">
                  <view class="list-label">
                    车辆类型:
                  </view>
                  <view class="list-value">
                    {{item.carType == '1' ? '汽车' : '电动车/摩托车'}}
                  </view>
                </view>
                <view class="list-item">
                  <view class="list-label">
                    送修时间:
                  </view>
                  <view class="list-value">
                    {{moment(item.sendRepairTime).format('YYYY/MM/DD HH:mm') || '无'}}
                  </view>
                </view>
              </view>
            </template>
          </yy-scroll-view>
        </view>
        <view class="bottom">
          <yy-button-add @click="handleAddVehicleMaintenance" text="新增维修记录"></yy-button-add>
        </view>
      </template>
      <template v-if="activeIndex == 1">
        <view class="top">
          <uni-easyinput prefixIcon="search" v-model="searchValueRakeCar" placeholder="请输入车牌号" @input="inputTakeCar"
            class="search-input"></uni-easyinput>
        </view>
        <view class="content">
          <yy-scroll-view ref="scrllViewRef2" :static-params="staticParams2"
            request-url="/machine/maintenanceRecordsList" :auto-request="false">
            <template slot-scope="{list}">
              <view class="list-item-wrapper" v-for="(item, index) in list" :key="index"
                @click="handleDetailTakeCar(item)">
                <view class="list-item-title">
                  {{item.carNumber ? item.carNumber : '无车牌'}}
                </view>
                <view class="list-item">
                  <view class="list-label">
                    车辆类型:
                  </view>
                  <view class="list-value">
                    {{item.carType == '1' ? '汽车' : '电动车/摩托车'}}
                  </view>
                </view>
                <view class="list-item">
                  <view class="list-label">
                    取车时间:
                  </view>
                  <view class="list-value">
                    {{moment(item.takeTime).format('YYYY/MM/DD HH:mm') || '无'}}
                  </view>
                </view>
              </view>
            </template>
          </yy-scroll-view>
        </view>
        <!-- <view class="bottom">
          <yy-button-add @click="handleTakeCar" text="新增取车记录"></yy-button-add>
        </view> -->
      </template>
    </view>

    <u-popup :show="show" mode="bottom" @close="close" @open="open" closeable>
      <view class="tenant-info-wrapper">
        <view class="top-title">
          <view class="p-title">请选择维修车辆类型</view>
        </view>
        <view class="p-container">
          <u-radio-group v-model="currentType" placement="row">
            <view class="p-item" @click="handleSelect('car')">
              <view class="p-item-wrapper " :class="{'p-active': currentType === 'car'}">
                <view class="p-item-l">
                  <view class="p-name">
                    汽车
                  </view>
                  <view class="p-text">
                    包括燃油车及新能源汽车
                  </view>
                </view>
                <u-radio name="car" activeColor="#2488F5" label=" "></u-radio>
              </view>
            </view>
            <view class="p-item" @click="handleSelect('electricVehicle')">
              <view class="p-item-wrapper" :class="{'p-active': currentType === 'electricVehicle'}">
                <view class="p-item-l">
                  <view class="p-name">
                    电动自行车/摩托车
                  </view>
                  <view class="p-text">
                    须填写车架编号
                  </view>
                </view>
                <u-radio name="electricVehicle" activeColor="#2488F5" label=" "></u-radio>
              </view>
            </view>
          </u-radio-group>
          <view class="p-button">
            <u-button @click="handleConfim" type="primary" text="确定" shape="circle" color="#2488F5"></u-button>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  import {
    navTo,
  } from '@/utils/util.js'
  import moment from '@/utils/moment.js'


  export default {
    options: {
      styleIsolation: 'shared'
    },
    data() {
      return {
        imgPrefix: uni.getStorageSync("imgPrefix"),
        baseImgUrl: this.$baseImgUrl,
        scrllViewRef1: null,
        scrllViewRef2: null,
        searchValueVehicleRecord: '',
        searchValueRakeCar: '',
        staticParams1: {
          stype: '0'
        },
        staticParams2: {
          stype: '1'
        },
        inputStyles: {
          background: '#f8f8f8',
          borderRadius: '340rpx 340rpx 340rpx 340rpx',
          border: '1rpx solid #F1F2F3',
        },
        options: {},
        list: [{
          name: " 送修记录",
          badge: {
            isDot: false,
          },
        }, {
          name: "取车记录",
          badge: {
            isDot: false,
          },
        }],
        activeIndex: 0,
        show: false,
        currentType: ''
      }
    },
    onLoad(options) {
      this.options = options
      Object.assign(this.staticParams1, {
        companyMessageId: this.options.companyMessageId
      })
      Object.assign(this.staticParams2, {
        companyMessageId: this.options.companyMessageId
      })

      this.$refs.scrllViewRef1.getList('init', this.staticParams1)

      uni.$on('add-vehicle-maintenance-success', () => {
        this.activeIndex = 0
        this.$nextTick(() => {
          this.staticParams1.likeName = ''
          this.$refs.scrllViewRef1.getList('init', this.staticParams1)
        })
      })

      uni.$on('add-take-car-success', () => {
        this.activeIndex = 1
        this.$nextTick(() => {
          this.staticParams2.likeName = ''
          this.$refs.scrllViewRef2.getList('init', this.staticParams2)
        })
      })
    },
    onUnload() {
      uni.$off('add-vehicle-maintenance-success')
      uni.$off('add-take-car-success')
    },
    methods: {
      moment,
      inputVehicle() {
        Object.assign(this.staticParams1, {
          likeName: this.searchValueVehicleRecord ? this.searchValueVehicleRecord.trim() : ''
        })
        this.$refs.scrllViewRef1.getList('init', this.staticParams1)
      },
      inputTakeCar() {
        Object.assign(this.staticParams2, {
          likeName: this.searchValueRakeCar ? this.searchValueRakeCar.trim() : ''
        })
        this.$refs.scrllViewRef2.getList('init', this.staticParams2)
      },
      tabsClick(item) {
        this.activeIndex = item.index;
        this.$nextTick(() => {
          if (this.activeIndex == 0) {
            this.staticParams1.likeName = ''
            this.$refs.scrllViewRef1.getList('init', this.staticParams1)
          } else if (this.activeIndex == 1) {
            this.staticParams2.likeName = ''
            this.$refs.scrllViewRef2.getList('init', this.staticParams2)
          }
        })
      },
      handleDetail(item) {
        navTo({
          url: '/specialtyBook/maintenanceRecords/index/vehicleMaintenanceDetail',
          params: {
            ...item
          }
        })
      },
      handleDetailTakeCar(item) {
        navTo({
          url: '/specialtyBook/maintenanceRecords/takeCar/takeCarDetail',
          params: {
            ...item
          }
        })
      },
      handleAddVehicleMaintenance() {
        this.show = true
      },
      handleAddTakeCar() {
        navTo({
          url: '/specialtyBook/maintenanceRecords/takeCar/takeCar',
          params: {
            companyMessageId: this.options.companyMessageId
          }
        })
      },
      close() {
        this.show = false
        this.currentType = ''
      },
      open() {},
      handleSelect(type) {
        this.currentType = type
      },
      handleConfim() {
        if (this.currentType === 'car') {
          navTo({
            url: '/specialtyBook/maintenanceRecords/index/vehicleMaintenance',
            params: {
              companyMessageId: this.options.companyMessageId
            }
          })
        } else if (this.currentType === 'electricVehicle') {
          navTo({
            url: '/specialtyBook/maintenanceRecords/index/electricVehicleAdd',
            params: {
              companyMessageId: this.options.companyMessageId
            }
          })
        }
        this.currentType = ''
        this.show = false
      },
      handleTakeCar() {
        navTo({
          url: '/specialtyBook/maintenanceRecords/takeCar/takeCar',
          params: {
            action: 'addTakeCar',
            ...this.options
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .root {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #F9F9F9;

    /deep/:nth-child(3) {
      flex: unset !important;
    }

    /deep/ .u-tabs {
      background: #fff;
    }

    .bottom-wrapper {
      flex: 1;
      height: 0;
      display: flex;
      flex-direction: column;
    }

    .tenant-info-wrapper {
      display: flex;
      flex-direction: column;
      padding-top: 30rpx;

      .top-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 134rpx;
        padding: 0 18rpx;

        .p-title {
          font-weight: bold;
          font-size: 30rpx;
          color: #101010;
        }
      }

      .p-container {
        /deep/.u-radio-group--row {
          flex-direction: column;
        }

        .p-item {
          width: 100%;
          padding: 0 35rpx;
          display: flex;

          .p-item-wrapper {
            display: flex;
            width: 100%;
            justify-content: space-between;
            background: #F9FCFF;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            margin-bottom: 20rpx;
            padding: 30rpx 38rpx 27rpx 42rpx;

            .p-name {
              font-weight: bold;
              font-size: 36rpx;
              color: #333333;
              margin-bottom: 16rpx;
            }

            .p-text {
              font-weight: 400;
              font-size: 26rpx;
              color: #BBBBBB;
            }
          }

          .p-active {
            border: 1rpx solid #2488F5;
          }
        }

        .p-button {
          padding: 20rpx 28rpx 39rpx 28rpx;

          /deep/ .u-button__text {
            font-size: 36rpx !important;
          }
        }
      }
    }


    .top {
      padding: 25rpx;
      background: #FFFFFF;

      /deep/ .is-input-border {
        background: #F8F8F8 !important;
        border-radius: 340rpx 340rpx 340rpx 340rpx !important;
        border: 1rpx solid #F1F2F3 !important;
      }
    }

    .content {
      flex: 1;
      padding: 10rpx 15rpx;
      height: 0;
    }

    .list-item-wrapper {
      padding: 32rpx;
      background: #FFFFFF;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      margin-bottom: 14rpx;

      .list-item-title {
        font-weight: bold;
        font-size: 30rpx;
        color: #181818;
      }

      .list-item {
        display: flex;
        margin-top: 18rpx;

        .list-label {
          font-weight: 500;
          font-size: 28rpx;
          color: #999999;
          margin-right: 5rpx;
        }

        .list-value {
          font-weight: 500;
          font-size: 28rpx;
          color: #101010;
        }
      }
    }

    .bottom {}
  }
</style>